<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程导入</el-breadcrumb-item>
      <el-breadcrumb-item>添加上机课程</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
              type="index"
              label="#">
          </el-table-column>
          <el-table-column
              label="课程名称"
              prop="statusStr">
          </el-table-column>
          <el-table-column
              label="任课教师ID"
              prop="statusStr">
          </el-table-column>
          <el-table-column
              label="上课班级"
              prop="statusStr">
          </el-table-column>
          <el-table-column
              label="上课人数"
              prop="statusStr">
           </el-table-column>
           <el-table-column
              label="上课周数"
              prop="statusStr">
           </el-table-column>
           <el-table-column
              label="周几上课"
              prop="statusStr">
           </el-table-column>
           <el-table-column
              label="时间段"
              prop="statusStr">
           </el-table-column>
           <el-table-column
              label="教室类型"
              prop="statusStr">
           </el-table-column>
           <el-table-column>
              <template slot="header">
                <span @click="dialogFormVisible = true">点击添加课程</span>
              </template>
                <el-table-column
                  label="操作功能模块">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlechange(scope.$index, scope.row)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
           </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="total, prev, pager, next, jumper"
          :total="this.AlltableData.length">
        </el-pagination>
        <el-dialog title="上机课程添加" :visible.sync="dialogFormVisible">
          <el-form :model="addform">
            <el-form-item label="上机周数" :label-width="formLabelWidth">
              <el-select v-model="addform.weeks" multiple placeholder="请选择哪几周上机" class="select1">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机天数" :label-width="formLabelWidth">
              <el-select v-model="addform.days" multiple placeholder="请选择上机天数" class="select3">
                <el-option
                  v-for="item in dayoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机节数" :label-width="formLabelWidth">
              <el-select v-model="addform.sections" multiple placeholder="请选择上机时间段" class="select4">
                <el-option
                  v-for="item in sectionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机班级" :label-width="formLabelWidth">
              <el-select v-model="addform.classIds" multiple placeholder="请选择上机班级" class="select2">
                <el-option
                  v-for="item in clsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程信息" :label-width="formLabelWidth">
              <el-cascader v-model="addform.value3" :options="coptions" clearable placeholder="请选择课程信息" class="text2"></el-cascader>
            </el-form-item>
            <el-form-item label="机房类型" :label-width="formLabelWidth">
              <div class="rad">
                <el-radio v-model="addform.typeId" label="1">普通机房</el-radio>
                <el-radio v-model="addform.typeId" label="2">实验室机房</el-radio>
              </div>
            </el-form-item>
            <el-form-item label="上机人数" :label-width="formLabelWidth">
              <el-input v-model="addform.labId" placeholder="请输入上机人数"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmitForm">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="上机课程更改" :visible.sync="dialogFormVisible1">
          <el-form :model="changeform">
            <el-form-item label="上机周数" :label-width="formLabelWidth">
              <el-select v-model="changeform.weeks" multiple placeholder="请选择哪几周上机" class="select1">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机天数" :label-width="formLabelWidth">
              <el-select v-model="changeform.days" multiple placeholder="请选择上机天数" class="select3">
                <el-option
                  v-for="item in dayoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机节数" :label-width="formLabelWidth">
              <el-select v-model="changeform.sections" multiple placeholder="请选择上机时间段" class="select4">
                <el-option
                  v-for="item in sectionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上机班级" :label-width="formLabelWidth">
              <el-select v-model="changeform.classIds" multiple placeholder="请选择上机班级" class="select2">
                <el-option
                  v-for="item in clsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程信息" :label-width="formLabelWidth">
              <el-cascader v-model="changeform.value3" :options="coptions" clearable placeholder="请选择课程信息" class="text2"></el-cascader>
            </el-form-item>
            <el-form-item label="机房类型" :label-width="formLabelWidth">
              <div class="rad">
                <el-radio v-model="changeform.typeId" label="1">普通机房</el-radio>
                <el-radio v-model="changeform.typeId" label="2">实验室机房</el-radio>
              </div>
            </el-form-item>
            <el-form-item label="上机人数" :label-width="formLabelWidth">
              <el-input v-model="changeform.labId" placeholder="请输入上机人数"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      AlltableData: [
        {
          id: 1,
          statusStr: 'aaa'
        },
        {
          id: 2,
          statusStr: 'bbb'
        },
        {
          id: 1,
          statusStr: 'aaa'
        },
        {
          id: 2,
          statusStr: 'bbb'
        },
        {
          id: 1,
          statusStr: 'mmm'
        },
        {
          id: 2,
          statusStr: 'nnnn'
        },
        {
          id: 1,
          statusStr: 'ffff'
        },
        {
          id: 2,
          statusStr: 'ggg'
        }
      ],
      tableData1: [],
      tableData: [],
      addform: {
        classIds: '',
        days: '',
        sections: '',
        weeks: '',
        value3: '',
        typeId: '',
        labId: ''
      },
      changeform: {
        classIds: '',
        days: '',
        sections: '',
        weeks: '',
        value3: '',
        typeId: '',
        labId: ''
      },
      options: [{
        value: '1',
        label: '第一周'
      }, {
        value: '2',
        label: '第二周'
      }, {
        value: '3',
        label: '第三周'
      }, {
        value: '4',
        label: '第四周'
      }, {
        value: '5',
        label: '第五周'
      }, {
        value: '6',
        label: '第六周'
      }, {
        value: '7',
        label: '第七周'
      }, {
        value: '8',
        label: '第八周'
      }, {
        value: '9',
        label: '第九周'
      }, {
        value: '10',
        label: '第十周'
      }, {
        value: '11',
        label: '第十一周'
      }, {
        value: '12',
        label: '第十二周'
      }, {
        value: '13',
        label: '第十三周'
      }, {
        value: '14',
        label: '第十四周'
      }, {
        value: '15',
        label: '第十五周'
      }, {
        value: '16',
        label: '第十六周'
      }, {
        value: '17',
        label: '第十七周'
      }, {
        value: '18',
        label: '第十八周'
      }, {
        value: '19',
        label: '第十九周'
      }, {
        value: '20',
        label: '第二十周'
      }],
      coptions: [
        {
          value: 'Web基础',
          label: 'Web基础',
          children: [{
            value: '于艳丽',
            label: '于艳丽'
          }]
        }
      ],
      clsoptions: [
        {
          value: '1',
          label: '计科186'
        }, {
          value: '2',
          label: '计科185'
        }, {
          value: '3',
          label: '计科184'
        }, {
          value: '4',
          label: '计科183'
        }, {
          value: '5',
          label: '计科182'
        }, {
          value: '6',
          label: '计科18'
        }],
      dayoptions: [
        {
          value: '1',
          label: '周一'
        }, {
          value: '2',
          label: '周二'
        }, {
          value: '3',
          label: '周三'
        }, {
          value: '4',
          label: '周四'
        }, {
          value: '5',
          label: '周五'
        }, {
          value: '6',
          label: '周六'
        }, {
          value: '7',
          label: '周日'
        }],
      sectionoptions: [
        {
          value: '1',
          label: '1-2节'
        }, {
          value: '2',
          label: '3-4节'
        }, {
          value: '3',
          label: '5-6节'
        }, {
          value: '4',
          label: '7-8节'
        }, {
          value: '5',
          label: '9-10节'
        }],
      formLabelWidth: '120px',
      input3: '',
      currentPage3: 0,
      dialogFormVisible1: false,
      dialogFormVisible: false
    }
  },
  created () {
    for (let i = 0; i < this.AlltableData.length; i += 6) {
      this.tableData1.push(this.AlltableData.slice(i, i + 6))
    }
    console.log(this.tableData1)
    this.tableData = this.tableData1[0]
  },
  methods: {
    add () {
      this.dialogFormVisible = true
    },
    handle (row, column, cell, event) {
      console.log('add')
    },
    headerClick (column, event) {
      console.log(column)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.tableData = this.tableData1[val - 1]
      console.log(val)
      console.log(`当前页: ${val}`)
    },
    async handleDelete (index, row) {
      await this.$http.post(
        '/course/deleteCourse',
        { 'Content-Type': 'multipart/form-data' },
        JSON.stringify(this.tableData[index])
      ).then(res => {
        if (res.datas.data.code === 200) {
          this.$message.success('课程删除成功~~')
          this.tableData.splice(index, 1)
        } else {
          this.$message.error('课程删除失败~~')
        }
      })
    },
    async addSubmitForm () {
      await this.$http.post(
        '/arrange/addArrange',
        { 'Content-Type': 'multipart/form-data' },
        this.addform
      ).then(res => {
        if (res.datas.data.code === 200) {
          this.$message.success('课程增加成功~~')
          this.tableData.push(this.addform)
        } else {
          this.$message.error('课程增加失败~~')
        }
      })
      this.dialogFormVisible = false
    },
    async handlechange (index, row) {
      this.dialogFormVisible1 = true
      console.log(index)
      await this.$http.post(
        '/course/changCourse',
        { 'Content-Type': 'multipart/form-data' },
        this.changeform
      ).then(res => {
        if (res.datas.data.code === 200) {
          this.$message.success('课程更改成功~~')
          this.tableData[index] = this.changeform
        } else {
          this.$message.error('课程更改失败~~')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.input-with-select{
  width: 20%;
}
.addbutton{
  width: 100%;
  height: 40px;
}
.el-table{
  margin-bottom: 50px;
}
.el-pagination{
  position: relative;
  top: 5px;
}
.el-icon-delete{
  color: red;
}
.el-icon-edit{
  color: blue;
}
.el-select.select1{
  width: 100%;
}
.el-select.select3{
  width: 100%;
}
.el-select.select4{
  width: 100%;
}
.el-select.select2{
  width: 100%;
}
.text2.el-cascader{
  width: 100%;
}
</style>
